<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="menu.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.3.0/lodash.js"></script>
  <script src="https://cdn.polyfill.io/v1/polyfill.js?features=Element.prototype.closest"></script>
  <script src="menu.js"></script>
</head>

<body>

  <script type="text/template" id="menu-template">
    <div class="menu">
      <span class="title"><%-title%></span>
    </div>
  </script>

  <!-- 
встроенная браузерная функция encodeURIComponent кодирует спец-символы для URL,
например русские буквы и пробелы 
в этом примере русских букв в ключах items нет, но потенциально они возможны
-->
  <script type="text/template" id="menu-list-template">
    <ul>
      <% for(var name in items) { %>
        <li>
          <a href="#<%=encodeURIComponent(name)%>">
            <%-items[name]%>
          </a>
        </li>
        <% } %>
    </ul>
  </script>

  <script>
    var menu = new Menu({
      title: "Сладости",
      template: _.template(document.getElementById('menu-template').innerHTML.trim()),
      listTemplate: _.template(document.getElementById('menu-list-template').innerHTML.trim()),
      items: {
        cake: "Торт", // cake  <a href="#cake">Торт</a>
        donut: "Пончик", // donut
        chocolate: "Шоколадка" // chocolate
      },
      onselect: showSelected
    });

    function showSelected(itemName) {
      alert(itemName);
    }

    document.body.appendChild(menu.getElem());
  </script>

</body>

</html>
